<template>
    <div>
        <h1>基础用法</h1>
        <el-text class="tw:mx-1">默认</el-text>
        <el-text class="tw:mx-1" type="primary">主要</el-text>
        <el-text class="tw:mx-1" type="success">成功</el-text>
        <el-text class="tw:mx-1" type="info">信息</el-text>
        <el-text class="tw:mx-1" type="warning">警告</el-text>
        <el-text class="tw:mx-1" type="danger">危险</el-text>
    </div>
    <div>
        <h1>尺寸</h1>
        <el-text class="tw:mx-1" size="small">小号</el-text>
        <el-text class="tw:mx-1">默认</el-text>
        <el-text class="tw:mx-1" size="large">大号</el-text>
    </div>
    <div>
        <h1>省略</h1>
        <el-text class="w-150px tw:mb-2" truncated="">将元素自身宽度设置为 100px</el-text>
        <el-row class="w-150px tw:mb-2">
            <el-text truncated="">受父元素挤压的显示效果</el-text>
        </el-row>
        <el-text class="mb-2" line-clamp="2">
            长城防火墙（Great Firewall of China，简称GFW）是中国政府建立的网络审查和监控系统，旨在监管国内互联网流量，限制对特定境外内容的访问。以下是其核心要点：

1. ​​定义与功能​​
​​官方名称​​：又称“金盾工程”，是国家主导的互联网审查项目，通过技术手段对跨境数据流进行过滤和阻断。
​​核心功能​​：
​​关键词过滤​​：检测并阻断含有敏感词汇的HTTP明文传输。
​​IP封锁​​：直接封禁目标服务器的IP地址，导致连接超时或重置。
​​DNS污染​​：返回错误的IP解析结果，使用户无法访问被屏蔽域名。
​​深度包检测（DPI）​​：分析应用层协议内容，识别并干扰加密流量中的敏感信息。
2. ​​技术实现​​
​​部署层级​​：主要位于国际出口和省级骨干网节点，部分功能延伸至境内网络。
​​关键设备​​：采用高性能防火墙、路由器和入侵检测系统（IDS），支持动态黑名单、NTP攻击防御等功能。
​​协议解析​​：支持对工控协议（如Modbus、OPC）的深度解析，扩展至工业网络安全领域。
3. ​​影响与应对​​
​​用户影响​​：被屏蔽的网站可能表现为连接超时、404错误或内容替换。
​​绕过方法​​：VPN、代理服务器或Tor网络，但需注意合规风险。
4. ​​国际对比​​
​​其他国家​​：美国通过法律施压获取用户数据，英国依据《网络安全法》监控有害内容，但均未采用类似GFW的全面封锁机制。
5. ​​争议与定位​​
​​争议​​：被批评限制信息自由，但官方强调其维护网络安全和社会稳定的作用。
​​发展​​：从基础IP封锁演进为智能化的多层级过滤系统，近年结合AI提升审查效率。
如需更详细的技术架构或政策分析，可参考具体案例。
        </el-text>
    </div>
    <div>
        <h1>混合使用</h1>
        <el-space direction="vertical">
            <el-text>
                <el-icon>
                    <Element-Plus></Element-Plus>
                </el-icon>
                饿了么+
            </el-text>
            <el-row>
                <el-text>评分</el-text>
                <el-rate class="ml-1"></el-rate>
            </el-row>
            <el-text>
                这段文字混合了图标
                <el-icon>
                    <Bell></Bell>
                </el-icon>
                和组件
                <el-button type="primary">按钮</el-button>
            </el-text>
        </el-space>
    </div>
</template>

<style scoped>
    /* .mx-1 {
        margin-right: 0.25rem;
    }
    .mx-1:last-child {
        margin-right: 0;
    } */
    /* .mb-2 {
        margin-bottom: 0.5rem;
    } */
    .w-150px {
        width: 150px;
    }
</style>